Tableros de Quarto® - Shiny

Encuentro 10

Cabecera YAML


Una cabecera YAML para tableros de Quarto interactivos Shiny se asemeja a lo visto en el encuentro pasado pero incorpora la opción server.


---
title: "Mi tablero"
format: dashboard
server: shiny
---

Las otras opciones conocidas para cabeceras de tableros funcionan igual (logos, botones, etc)

Estructura de un shiny


La estructura de estos tableros necesitan de dos componentes:

  • la interfaz de usuario (ui)

    Que es visible y la integran los dispositivos de entrada

  • el servidor Shiny (server)

    Que no es visible y se encarga de traducir los cambios efectuados en la ui en reacciones del producto visualizado (gráfico, tabla, etc)

Además, siempre habrá una área donde se visualizan los elementos interactivos.

Interfaz de usuario


La interfaz de usuario puede estar compuesta por una o varias entradas de datos (inputs).


Los inputs se pueden disponer de varias formas:

  • Barras laterales
  • Barras de herramientas
  • Cabecera de tarjetas

Barras laterales


Una barra lateral global se configura con:

---
title: "Mi tablero"
format: dashboard
server: shiny
---
    
## {.sidebar}

```{r}
# input 1

# input 2
```

Se le llama global porque esta presente siempre aunque tengamos múltiples páginas y pasemos de una a otra.

Barra lateral global


Barra lateral en línea

Las barras laterales también se puede ubicar dentro del diseño del tablero, por ejemplo en una misma fila de dos columnas (una barra lateral y otra donde se muestra un gráfico asociado)

---
title: "Mi tablero"
format: dashboard
server: shiny
---

## Row

### {.sidebar}

```{r}
```

### Column

```{r}
```

Barra lateral en línea


Barra lateral a derecha


Las barras laterales se pueden ubicar en el lado izquierdo o derecho. También puede modificar el tamaño de las barras laterales mediante el atributo width.

---
title: "Mi tablero"
format: dashboard
server: shiny
---

## Column

```{r}
```

## {.sidebar width="300px"}

```{r}
```

Barra lateral a derecha


Barra de herramientas


Las barras de herramientas son similares a las barras laterales, pero ofrecen un diseño horizontal. Se crean agregando la clase .toolbar a un encabezado de fila de nivel 2.

---
title: "Mi tablero"
format: dashboard
server: shiny
---

## {.toolbar}
    
```{r}
```

## Row

```{r}
```

Barra de herramientas


Barra de herramientas

Al igual que las barras laterales, las barras de herramientas pueden ser globales o en línea, es decir definidas dentro del diseño. Por ejemplo, a nivel columna.

También se puede ubicar debajo del gráfico si invertimos el orden de las filas.

Cabecera de tarjetas


Para agregar una barra de herramientas a una tarjeta, se define inmediatamente encima o debajo de la celda que genera la salida. Se puede hacer agregando el metadato content: card-toolbar a un fragmento de código R o creando un div con la clase .card-toolbar


```{r}
#| content: card-toolbar

```

::: {.card-toolbar}

```{r}

```

:::

Cabecera de tarjetas


Barra lateral de tarjetas

De la misma forma se puede agregar una barra lateral solo a una tarjeta, aplicando la clase .card-sidebar

```{r}
#| content: card-sidebar

```

Inputs

Dentro de las barras, sean estas globales, laterales, de tarjeta, etc vamos a incluir las entradas (inputs) que vienen preseteados con Shiny a modo de funciones.

Hay una variedad de posibilidades, entre las cuales se encuentra:

Inputs


Hay funciones de entradas directas como numericInput() para datos numéricos, textInput() para texto y dateInput() para fechas; rangos como dateRangeInput(), botones tipo actionButton() o radioButtons() y barras de desplazamiento como sliderInput().

Los sufijos de estas funciones pueden ser generalmente Input para entradas de valores o Buttons para pulsar botones.

Todas las funciones de entrada tienen un argumento donde se define la variable que va a tomar el o los valores que el usuario determine, llamada inputID.

Esta variable será utilizada luego en la parte del servidor para reaccionar de forma interactiva a sus cambios.

Inputs


Ejemplo de una función de Input numérica:

```{r}
#| content: card-sidebar

shiny::numericInput(inputID = numero,
             label = "Número:", 
             value = 10, 
             min = 1, 
             max = 100)

```

Construye un input numérico, bajo la etiqueta “Número:” con un valor predeterminado de 10, sobre una escala de 1 a 100 que se almacena en la variable numero.

Inputs


Ejemplo de una función Input de botones de opción (RadioButtons):

```{r}
#| content: card-sidebar

shiny::radioButtons(inputId = "dist", 
                    label = "Tipo de distribución:",
                    choices = c("Normal" = "norm",
                                "Uniforme" = "unif",
                                "Log-normal" = "lnorm",
                                "Exponencial" = "exp"),
                    selected = "Normal")

```

Construye un input de botones de opción, bajo la etiqueta “Tipo de distribución:” con una opción seleccionada en “Normal”, sobre 4 opciones declaras en choices que se almacena en la variable dist.

Inputs


Ejemplo de una función Input de desplazamiento (slideInput):

```{r}
sliderInput(inputID = "obs", 
            label = "Número de observaciones:",
            min = 0, 
            max = 1000, 
            value = 500,
            step = 10
  )
```

Construye un input de desplazamiento, bajo la etiqueta “Número de observaciones:” con un valor predeterminado en 500 de una escala entre 0 y 1000, con saltos de 10 en 10, que se almacena en la variable obs.

Servidor

El bloque servidor se declara con el metadato #| context: server. Dentro se utilizan las funciones de Shiny para hacer reactivas a los inputs a determinadas partes de lo que se está construyendo (por ejemplo: un gráfico).

También se utiliza la función reactive() en general, para construir expresiones reactivas.

```{r}
#| context: server

datos <- reactive({
  datos_leídos |> filter(var1 == input$numero)})
```

La expresión va encerrada entre llaves y contiene un filtro asociado a un input numérico (input$numero). El dataframe datos va a cambiar cada vez que cambien el ingreso del número, filtrando las observaciones que tengan ese valor en var1 en los datos proveniente de la lectura (datos_leídos).

Servidor

Otra función que se incluye en el bloque servidor, relacionada con gráficos es renderPlot().

```{r}
#| context: server

output$grafico <- renderPlot({
    datos() |> 
      ggplot(aes(input$x, input$y)) +
      geom_point()
```

La expresión dentro de renderPlot() va entre llaves y contiene un gráfico ggplot. Las variables declaradas en x e y provienen de inputs.

La salida se almacena en la variable output$grafico que se va actualizar cada vez que el gráfico se desarrolle con variables x o y nuevas.

Salidas reactivas


Toda entrada de datos interactiva va a comunicarse con el código escrito en el área servidor, como vimos en las diapositivas anteriores, y la o las salidas finales se van a mostrar en bloques de código dentro de tarjetas o dispuestas directamente en filas o columnas.

Shiny trae funciones de salidas que finalizan con la palabra Output, como plotOutput() para presentar gráficos provenientes de renderPlot() o textOutput() para textos de renderText().


Por ejemplo, para visualizar el renderPlot anterior necesitaremos hacer:

```{r}
plotOutput("grafico")
```

Temas


  • Salidas reactivas
  • Parámetros
  • Lectura de datos dinámica - goggledrive - rdrop2